<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../marked.min.js"></script>
    <script src="../SequenceGuid.js"></script>
    <style type="text/css">
        .markdown-row:hover {
            background: #F5F5F5
        }


    </style>
</head>
<body>
<input id="pageSize" value="60">
<input id="page" value="0" onkeyup="keyUp2SearchMark()">

<input id="oriContent" onkeyup="keyUp2addText()" style="width:100%;height:20px;border-radius: 6px;"/>

<div id="show" style="width: 100%">

</div>


<script type="text/javascript">
    //页面缩放比例为1
    document.getElementsByTagName('body')[0].style.zoom = 1;
    //
    window.onkeyup = function () {
        if (event.keyCode = 13) {
            if (window.getSelection) {
                let node = window.getSelection().focusNode;
                while (node != null) {
                    if (node.getAttribute != null && node.getAttribute("class") == "markdown-row") {
                        node.click();
                        document.getElementById('oriContent').focus();
                    }
                    node = node.parentNode;
                }
            }
        }
    }

    function keyUp2SearchMark() {
        if (event.keyCode == 13) {
            searchMark();
        }
    }


    function searchMark() {
        let pageAndOrder = {};
        pageAndOrder.pageSize = parseInt(document.getElementById("pageSize").value);
        pageAndOrder.page = parseInt(document.getElementById("page").value);
        pageAndOrder.orderMapList = [{name: 'id', order: 'asc'}];
        fetch("/rest/common/evMarkdownRow/v1/pageAndSort", {
            method: "POST",
            body: JSON.stringify(pageAndOrder),
            headers: new Headers({
                'Content-Type': 'application/json'
            }),
        }).then((res) => res.json()).then(
            data => {
                let array = data.content;
                for (let i = 0; i < array.length; i++) {
                    let record = array[i];
                    createOrUpdateLine("show", record.id, record.text, record.dateCreate, record.dateModify);
                }
            }
        );

    }

    function keyUp2addText() {
        if (event.keyCode == 13) {
            convert(null);
        }
    }

    function keyUp2Focous() {
        console.log(event);
    }

    //更新页面内容
    function createOrUpdateLine(showId, selfId, text, dateCreate, dateModify) {
        let data = {method: 'POST', id: selfId, text: text, dateCreate: dateCreate, dateModify: dateModify};
        if (text != null && text.trim() != "") {
            let html = marked(text);
            let div = null;
            if (selfId) {
                div = document.getElementById(selfId);
            }
            if (div == null) {
                div = document.createElement("div");
                data.id = data.id == null ? guid() : data.id;
                data.dateCreate = dateCreate == null ? new Date().getTime() : dateCreate;
                div.setAttribute("id", data.id);
                div.setAttribute("date-create", data.dateCreate);
                div.setAttribute("onclick", `resetOrigin('${div.id}')`);
                div.setAttribute("class", "markdown-row");
                //另起一列的逻辑
                let divShow = document.getElementById(showId);
                let childCount = divShow.childElementCount;
                let width = document.documentElement.clientHeight || document.body.clientHeight;
                if (childCount == 0 || divShow.lastElementChild.offsetHeight + 100 > width) {
                    let divColumn = document.createElement("div");
                    divColumn.setAttribute("class", "markdown-col");
                    divColumn.style.float = "left";
                    divColumn.style.borderRight = "1px solid black";
                    divColumn.style.padding = "10px";
                    divColumn.style.margin = "10px";
                    divShow.appendChild(divColumn);
                }
                divShow.lastElementChild.appendChild(div);
            }
            data.dateModify = dateModify == null ? new Date().getTime() : dateModify;
            div.setAttribute("date-modify", data.dateModify + "");
            div.setAttribute("real-text", text);
            div.innerHTML = html;
        } else if (selfId != null) {
            let div = document.getElementById(selfId);
            data.method = 'DELETE';
            div.parentNode.removeChild(div);
        }
        return data;
    }


    function convert() {
        let ori = document.getElementById("oriContent");
        let id = ori.getAttribute("target-id");
        let text = ori.value;
        let data = createOrUpdateLine("show", id, text);
        if (data.method == "POST" && data.text != null && data.text.trim() != '') {
            fetch("/rest/common/evMarkdownRow/v1/", {
                method: "POST",
                body: JSON.stringify(data),
                headers: new Headers({
                    'Content-Type': 'application/json'
                }),
            });
        } else if (data.method == 'DELETE') {
            fetch("/rest/common/evMarkdownRow/v1/" + data.id, {
                method: "DELETE",
            })
        }
        ori.value = "";
        ori.removeAttribute("target-id");

    }


    function resetOrigin(id) {
        document.getElementById("oriContent").setAttribute("target-id", id);
        document.getElementById("oriContent").value = document.getElementById(id).getAttribute("real-text");
    }
</script>
</body>
</html>